import React, { Component } from 'react'
import { connect } from 'react-redux'

import { Interaction } from './AlertWindow'

import { formatNewObjToDraw, editObj, setDrawWin, closeWin, updateBasicInfo } from '../redux/action/drawActions'
// import store from '../store'

let partSettings
// TODO 整理代码补全注释

const generalMap = [
	{
		'0': '自定义函数',
		'1': '一次函数',
		'2': '二次一般式',
		'-1': '反比例函数',
		'-2': '三角函数 sin',
		'-3': '三角函数 cos',
		'-4': '二次顶点式',
	},
	{
		'0': '圆',
		'1': '弧',
	},
]

// ==================================================
// 部分组件

// BasicInfoSettings : 函数,图形的基础信息:名称,颜色,粗细
class BasicInfoSettings extends Component {
	render() {
		return (
			<div className='basic-params'>
				{generalMap[this.props.type][this.props.detailedType]} :{' '}
				<input
					type='text'
					id='name'
					title='命名'
					value={this.props.name}
					onChange={e => this.props.updateBasicInfo({ name: e.target.value })}
				/>
				<div className='right'>
					<input
						type='color'
						title='线条颜色'
						value={this.props.color}
						onChange={e => this.props.updateBasicInfo({ color: e.target.value })}
					/>
					<input
						type='number'
						title='线条粗细'
						value={this.props.width}
						onChange={e => this.props.updateBasicInfo({ width: e.target.value })}
					/>
				</div>
			</div>
		)
	}
}
BasicInfoSettings = connect(state => state.drawReducer.basicInfo, { updateBasicInfo })(BasicInfoSettings)
// ==================================================

function makeParamInput(order) {
	return (
		<input
			type='text'
			value={partSettings.state.params[order]}
			onChange={e => {
				const editParam = e.target.value
				partSettings.setState(pre => {
					const tmp = pre.params
					tmp[order] = editParam
					return { params: tmp }
				})
			}}
		/>
	)
}

function FuncInput(props) {
	switch (props.type) {
		case 0: {
			return (
				<div className='main-input'>
					y =
					<input
						type='text'
						value={partSettings.state.fae}
						className='long'
						onChange={e => {
							const editParam = e.target.value
							partSettings.setState({ fae: editParam })
						}}
					/>
				</div>
			)
		}
		case 1:
			return (
				<div className='main-input'>
					y = {makeParamInput(0)}x + {makeParamInput(1)}
				</div>
			)
		case 2:
			return (
				<div className='main-input'>
					y = {makeParamInput(0)}x<sup>2</sup> + {makeParamInput(1)}x + {makeParamInput(2)}
				</div>
			)
		case -1:
			return <div className='main-input'>y = {makeParamInput(0)}/x</div>
		case -2:
			return <div className='main-input'>y = sin( {makeParamInput(0)}x )</div>
		case -3:
			return <div className='main-input'>y = cos( {makeParamInput(0)}x )</div>
		case -4:
			return (
				<div className='main-input'>
					y = {makeParamInput(0)}(x-{makeParamInput(1)})<sup>2</sup> + {makeParamInput(2)}
				</div>
			)
		default:
			return <div></div>
	}
}
function GraphInput(props) {
	switch (props.type) {
		case 0: {
			return (
				<div className='main-input'>
					圆心 : ({makeParamInput(0)} , {makeParamInput(1)}) 半径 : {makeParamInput(2)}
				</div>
			)
		}
		case 1: {
			return (
				<div className='main-input'>
					圆心 : ({makeParamInput(0)} , {makeParamInput(1)}) 半径 : {makeParamInput(2)}
					<br />
					<br />
					起始弧度 : {makeParamInput(3)} 结束弧度 : {makeParamInput(4)}
				</div>
			)
		}
		default: {
			return false
		}
	}
}

class FuncSettings extends Component {
	render() {
		return (
			<div className='func-settings'>
				<BasicInfoSettings type={0} detailedType={this.props.detailedType} />
				<FuncInput type={this.props.detailedType} />
			</div>
		)
	}
}

class GraphSettings extends Component {
	render() {
		return (
			<div className='graph-settings'>
				<BasicInfoSettings type={1} detailedType={this.props.detailedType} />
				<GraphInput type={this.props.detailedType} />
			</div>
		)
	}
}
class PartSettings extends Component {
	state = {
		params: ['', '', '', '', ''],
		edit: null,
		fae: '',
	}
	toDraw = () => {
		let { params, edit, fae } = this.state
		let {
			detailedType,
			type,
			basicInfo: { name },
		} = this.props
		name = name || generalMap[+(type !== 'func')][detailedType]
		this.props.updateBasicInfo({ name })
		if (edit) {
			// edit.show = true
			this.props.editObj({ detailedType, name, params, type, fae, edit })
		} else {
			this.props.formatNewObjToDraw({ detailedType, name, params, type, fae })
		}
	}
	toEdit = (type, detailedType, name, params = [], fae, color, width, edit) => {
		this.props.setDrawWin(type, detailedType)
		this.props.updateBasicInfo({ name, color, width })
		this.setState({
			params,
			fae,
			edit,
		})
	}
	// 关闭当前弹出窗口，同时清空所输入的数据（初始化）
	close = () => {
		this.setState({ params: ['', '', ''], edit: null, fae: '' })
		this.props.closeWin()
	}
	render() {
		partSettings = this
		return (
			<Interaction executeFunc={this.toDraw} closeEffect={this.close} show={this.props.show}>
				{this.props.type === 'func' ? (
					<FuncSettings detailedType={this.props.detailedType} />
				) : (
					<GraphSettings detailedType={this.props.detailedType} />
				)}
			</Interaction>
		)
	}
}
const mapStateToProps = state => state.drawReducer

export default connect(mapStateToProps, { formatNewObjToDraw, editObj, closeWin, setDrawWin, updateBasicInfo })(
	PartSettings
)
export { partSettings }
